<template>
  <div class="soil-monitor">
    <!-- 标题部分 -->
    <div class="header-title">
      <dv-decoration-3 style="width:100px;height:20px;" />
      <div class="title-text">智慧大棚土壤质量实时监测</div>
      <dv-decoration-3 style="width:100px;height:20px;" />
    </div>

    <!-- 信息展示部分 -->
    <div class="info-grid">
      <dv-border-box-1>
        <div class="info-content">
          <span class="label">智慧大棚编号</span>
          <span class="value">{{ soilData.greenhouseId }}</span>
        </div>
      </dv-border-box-1>
      <dv-border-box-1>
        <div class="info-content">
          <span class="label">占地面积</span>
          <span class="value">{{ soilData.area }}</span>
          <span class="unit">亩</span>
        </div>
      </dv-border-box-1>
      <dv-border-box-1>
        <div class="info-content">
          <span class="label">生长阶段</span>
          <span class="value green">{{ soilData.growthStage }}</span>
        </div>
      </dv-border-box-1>
      <dv-border-box-1>
        <div class="info-content">
          <span class="label">土壤PH值</span>
          <span class="value">{{ soilData.ph }}</span>
          <span class="status">{{ soilData.phStatus }}</span>
        </div>
      </dv-border-box-1>
    </div>

    <!-- 土壤指标部分 -->
    <div class="soil-indicators">
      <dv-border-box-1>
        <div class="indicator-content">
          <div class="indicator-value">{{ soilData.nitrogen }}</div>
          <div class="indicator-label">土壤含氮量</div>
          <div class="indicator-unit">MG/KG</div>
          <div class="indicator-status">{{ soilData.nStatus }}</div>
        </div>
      </dv-border-box-1>
      <dv-border-box-1>
        <div class="indicator-content">
          <div class="indicator-value">{{ soilData.phosphorus }}</div>
          <div class="indicator-label">土壤含磷量</div>
          <div class="indicator-unit">MG/KG</div>
          <div class="indicator-status">{{ soilData.pStatus }}</div>
        </div>
      </dv-border-box-1>
      <dv-border-box-1>
        <div class="indicator-content">
          <div class="indicator-value">{{ soilData.potassium }}</div>
          <div class="indicator-label">土壤含钾量</div>
          <div class="indicator-unit">MG/KG</div>
          <div class="indicator-status">{{ soilData.kStatus }}</div>
        </div>
      </dv-border-box-1>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { get } from '@/utils/request'

const soilData = ref({
  greenhouseId: 'E-01',
  area: 0.68,
  growthStage: '开花结果期',
  ph: 0,
  phStatus: '未知',
  nitrogen: 0,
  nStatus: '未知',
  phosphorus: 0,
  pStatus: '未知',
  potassium: 0,
  kStatus: '未知'
})

// 获取最新数据
const fetchSoilData = async () => {
  try {
    const response = await get('/soil/current')
    if (response) {
      soilData.value = {
        greenhouseId: response.greenhouseId || 'E-01',
        area: Number(response.area) || 0.68,
        growthStage: response.growthStage || '开花结果期',
        ph: Number(response.ph) || 0,
        phStatus: response.phStatus || '未知',
        nitrogen: Number(response.nitrogen) || 0,
        nStatus: response.nstatus || '未知',
        phosphorus: Number(response.phosphorus) || 0,
        pStatus: response.pstatus || '未知',
        potassium: Number(response.potassium) || 0,
        kStatus: response.kstatus || '未知'
      }
      
      console.log('Backend response:', response)
      console.log('Processed data:', soilData.value)
    }
  } catch (error) {
    console.error('Failed to fetch soil data:', error)
  }
}

// 定时刷新数据
let refreshTimer = null

onMounted(() => {
  fetchSoilData() // 初始获取数据
  // 设置定时刷新，每5分钟更新一次数据
  refreshTimer = setInterval(fetchSoilData, 300000)
})

onBeforeUnmount(() => {
  clearInterval(refreshTimer)
})
</script>

<style lang="scss" scoped>
.soil-monitor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;

    .title-text {
      font-size: 14px;
      color: #03d3ec;
      padding: 0 15px;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    
    :deep(.dv-border-box-1) {
      .info-content {
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        overflow: hidden;

        .label {
          color: #ffffff;
          font-size: 14px;
          margin-left: 10px;
          flex-shrink: 0;
        }

        .value {
          color: #ff4d4f;
          font-size: 20px;
          margin: 0 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 10px;

          &.green {
            color: #00ff00;
            font-size: 16px;
          }
        }

        .unit, .status {
          color: #00ff00;
          font-size: 16px;
          margin-right: 20px;
          flex-shrink: 0;
        }

        .status {
          padding: 2px 8px;
          background: rgba(0, 255, 0, 0.1);
          border-radius: 4px;
        }
      }
    }
  }

  .soil-indicators {
    display: flex;
    justify-content: space-between;
    gap: 1px;
    margin-top: auto;

    :deep(.dv-border-box-1) {
      flex: 1;

      .indicator-content {
        padding: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .indicator-value {
          font-size: 30px;
          color: #ff4d4f;
          margin-bottom: 20px;
        }

        .indicator-label {
          font-size: 12px;
          color: #ffffff;
          margin-bottom: 20px;
        }

        .indicator-unit {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 2px;
        }

        .indicator-status {
          font-size: 12px;
          color: #00ff00;
          padding: 2px 8px;
          background: rgba(0, 255, 0, 0.1);
          border-radius: 4px;
        }
      }
    }
  }
}
</style> 